<template>
	<view>
		<u-form ref="uForm" label-width="240rpx" :model="form">
			<view class="box-container">
				<u-form-item label="物品名称" required prop="name">
					<u-input v-model="form.name" clearable placeholder="请输入您的物品名称"></u-input>
				</u-form-item>
				<view class="t32 c-light">最近寄送:</view>
				<view class="tags"> 
					<view v-for="(item,index) in tags" class="item">
						<u-tag :text="item.name" :plain="!item.select" size="mini" shape="circle" @click="selectTag(index)"></u-tag>
					</view>
				</view>
			</view>
			<view class="box-container">
				<u-form-item label="预估重量(kg)">
					<view class="number">
						<u-number-box v-model="form.weight"></u-number-box>
					</view>
				</u-form-item>
				<u-form-item label="预估立方(m³)">
					<view class="number">
						<u-number-box v-model="form.volume"></u-number-box>
					</view>
				</u-form-item>
				<u-form-item label="件数(件)">
					<view class="number">
						<u-number-box v-model="form.number" :min="1" :max="10000" integer></u-number-box>
					</view>
				</u-form-item>
				<view class="t20 c-light">注：实际重量和体积以收派员确定为准，物品在包装后重量可能会增加，以实际收费为准。</view>
			</view>
			<view class="box-container">
				<view class="t32">备注</view>
				<view class="mt32" >
					<u-textarea v-model="form.remark" placeholder="给搬运师傅捎个话吧... 需纸箱、带防水袋、需打木架" ></u-textarea>
				</view>
				<view class="mt32 t20 c-error">注意：纸箱、带防水袋、打木架需额外收费</view>
			</view>
			<view class="bottom">
				<u-button type="success" size="large" shape="circle" text="确定" @click="submit"></u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	const dayjs = require('dayjs')
	export default {
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '请输入物品名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					name: null,
					weight: 100,
					volume: 10,
					number: 1,
					remark: null,
				},
				tags: [
					{
						name: '衣服',
						select: false
					},
					{
						name: '自行车',
						select: false
					},
					{
						name: '音响',
						select: false
					}
				]
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			
		},
		onShow() {

		},
		methods: {
			selectTag(index) {
				this.form.name=this.tags[index].name
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$emit('carry_goods', this.form)
					uni.navigateBack();
				}).catch(errors => {
					uni.$u.toast('信息未填写完整')
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.box-container {
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		border-radius: 16rpx;
		box-shadow: 2rpx 2rpx 8px #ddd;
		background-color: #fff;
		padding: 64rpx 32rpx;
		box-sizing: border-box;
	}

	.number {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}
	.tags {
		display: flex;
		flex-wrap: wrap;
		.item {
			margin: 32rpx 32rpx 0 0;
		}
	}
	.bottom {
		padding: 64rpx 32rpx;
	}
</style>
